<template>
  <div class="address-list">
    <Back title="地址管理" />
    <div>
      <Bg>
        <div>
            <van-address-list
              :list="addressList"
              default-tag-text="默认"
              :switchable="false"
              @add="addAddress"
              @edit="editAddress"
            />
            <van-empty v-if="addressList.length === 0" description="没有地址！" />
        </div>
        
      </Bg>
    </div>
  </div>
</template>

<script>
import Back from "../components/Back.vue";
import Bg from "../components/Bg.vue";
export default {
  name: "AddressList",
  components: {
    Back,
    Bg,
  },
  data() {
    return {
      //地址列表数据
      addressList: []
    };
  },

  created() {
    this.getAddressList();
  },

  methods: {
    //新增地址
    addAddress() {
      this.$router.push({name: 'Address'});
    },

    //编辑地址
    editAddress(item) {
            this.$router.push({name: 'Address', params: {aid: item.aid}});
    },

    //获取地址列表
    getAddressList() {
      this.axios({
        method: 'get',
        url: '/findAddress'
      }).then(res=> {
        

        this.$toast(res.data.msg);

        if (res.data.code === 700) {
          return this.$router.push({name: 'Login'});
        }

        if (res.data.code === 20000) {
          res.data.result.forEach(v => {
            v.address = `${v.province}${v.city}${v.county}${v.addressDetail}`;
            v.isDefault = Boolean(v.isDefault);
          })

          this.addressList = res.data.result;
        }

        

      }).catch(err=> {
              })
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-address-list{
  padding: 0;
}

/deep/ .van-address-item{
  padding: 10px 0;
}

/deep/ .van-address-item .van-radio__icon--checked .van-icon{
  background-color: #365DED;
  border-color: #365DED;
}

/deep/ .van-button--danger{
  background-color: #0C34BA;
  border-color: #0C34BA;
}
</style>